<div class='list-group'>
    <div ng-repeat="item in events" class="list-group-item">
    <span class="pull-right btn-group" style="margin-top: 7px;">
      <a href="" class="btn btn-sm btn-default" ui-sref="^.edit({id: item.id})">
          <i class="fa fa-pencil"></i>
      </a>
      <a href="" class="btn btn-sm btn-default" ng-click="delete({id: item.id})">
          <i class="fa fa-trash-o"></i>
      </a>
    </span>
        <h4 class="list-group-item-heading">
            <a href="" ui-sref="^.view({id: item.id})">{{item.name}}</a>
            <small href="" ui-sref="^.view({id: item.id})">{{item.location}} , {{item.venue.city}},
                {{item.venue.country}}
            </small>
        </h4>
        <p class="list-group-item-text">
            {{item.start_time | date:'medium'}}
            <span ng-if="item.end_time"> - {{item.end_time | date:'medium'}}</span>
        </p>
    </div>
    <div ng-show="!events.length" class="list-group-item">
        <h4 class="list-group-item-heading" translate>
            There are no events
        </h4>

        <p class="list-group-item-text" translate>Click <a href="" ui-sref="^.add">here</a> to add a event!</p>
    </div>
</div>
